<template>
	<div class="role-container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
		<div class="top">
			<el-select v-model="searchInfo.storeId" size="small" style="width: 120px">
				<el-option v-for="item in storeList" :key="item.storeId" :label="item.storeName" :value="item.storeId"> </el-option>
			</el-select>
			<el-input v-model="searchInfo.productName" placeholder="商品名称" size="small" clearable style="width: 120px"></el-input>
			<div class="block">
				<span>开始时间：</span>
				<el-date-picker v-model="startTime" type="date" placeholder="选择日期" size="small"> </el-date-picker>
				<span>结束时间：</span>
				<el-date-picker v-model="endTime" type="date" placeholder="选择日期" size="small"> </el-date-picker>
			</div>
			<el-button type="primary" icon="el-icon-search">查询</el-button>
		</div>
		<div class="btn-div">
			<el-button type="warning" icon="el-icon-upload2" @click="exportClick">导出数据</el-button>
		</div>
		<div class="talb_div">
			<el-table :data="dataList" border @selection-change="handleSelectionChange" style="margin-top: 10px" table-layout="auto" size="large" stripe>
				<el-table-column type="selection" width="50"> </el-table-column>
				<el-table-column prop="outsId" label="出库单ID" width="180"> </el-table-column>
				<el-table-column prop="storeName" label="仓库名称" width="180"> </el-table-column>
				<el-table-column prop="productName" label="商品名称" width="200"> </el-table-column>
				<el-table-column prop="tallyCode" label="理货员" width="180"> </el-table-column>
				<el-table-column prop="outNum" label="出库数量" width="200"> </el-table-column>
				<el-table-column label="出库状态" width="180">
					<!-- <template slot-scope="scope">{{ scope.row.userState == 1 ? '启用' : '禁用' }}</template> -->
					<template #default="scope"
						><span :class="{ red: scope.row.isOut == 0, green: scope.row.isOut == 1 }">{{ scope.row.isOut == 1 ? '已出库' : '未出库' }}</span></template
					>
				</el-table-column>
				<el-table-column prop="userCode" label="创建人" width="180"> </el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
				<el-table-column label="操作" width="300">
					<template slot-scope="scope" v-if="scope.row.isOut == 0">
						<el-button size="small" type="primary" @click="confirmoutstore(scope.row)">确定出库</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page_nation">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum"
				:page-sizes="[10, 20, 30, pageInfo.totalNum]"
				:page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.totalNum"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
import { exportExcel } from 'excel-tools/dist/main.es.js';
export default {
	data() {
		return {
			loading: false,
			exportData: [],
			searchInfo: {
				storeId: 1,
				startTime: '',
				endTime: '',
				productName: '',
			},
			pageInfo: {
				pageSize: 10,
				pageNum: 1,
				totalNum: 0,
			},
			storeList: [],
			dataList: [],
		};
	},
	methods: {
		getList() {
			this.loading = true;
			this.$http
				.get('/outstore/outstore-page-list', {
					params: {
						...this.searchInfo,
						...this.pageInfo,
					},
				})
				.then((res) => {
					const {
						code,
						data: { pageSize: one, pageNum, resultList, totalNum },
					} = res;
					if (code == 200) {
						this.dataList = resultList;
						this.pageInfo.totalNum = totalNum;
						this.pageInfo.pageSize = one;
						this.pageInfo.pageNum = pageNum;
						console.log('data', res.data);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		//获取选取框
		handleSelectionChange(selection, row) {
			this.exportData = [...selection];
			this.exportData.forEach((item) => {
				this.$set(item, 'isOut', item.isOut == 0 ? '未出库' : '已出库');
			});
			console.log(selection);
		},
		//生成出库单
		confirmoutstore(row) {
			this.$http
				.put('/outstore/outstore-confirm', {
					...row,
					// roleState: row.isOut == 1 ? '0' : '1',
				})
				.then((res) => {
					if (res.code == 200) {
						this.getList();
						this.$message.success('出库成功');
					} else if (res.code == 501) {
						this.$message.error('商品库存不足');
					}
				});
		},
		//页码
		handleSizeChange(size) {
			this.pageInfo.pageSize = size;
			this.getList();
		},
		handleCurrentChange(current) {
			this.pageInfo.pageNum = current;
			this.getList();
		},
		//导出表格
		exportClick() {
			exportExcel({
				fileName: '出库列表',
				header: [
					{
						key: 'outsId',
						header: '出库单ID',
						width: 25,
					},
					{
						key: 'storeName',
						header: '仓库名称',
						width: 24,
					},
					{
						key: 'productName',
						header: '商品名称',
						width: 23,
					},
					{
						key: 'tallyCode',
						header: '理货员',
						width: 25,
					},
					{
						key: 'outNum',
						header: '出库数量',
						width: 25,
					},
					{
						key: 'isOut',
						header: '出库状态',
						width: 24,
					},
					{
						key: 'userCode',
						header: '创建人',
						width: 23,
					},
					{
						key: 'createTime',
						header: '创建时间',
						width: 23,
					},
				],
				content: this.exportData, // 导出的数据
			});
		},
	},
	created() {
		//拿到用户下拉菜单
		this.$http.get('/outstore/store-list').then((res) => {
			const { code, data } = res;
			code == 200 && (this.storeList = data);
		});
		this.getList();
	},
};
</script>

<style lang="less" scoped>
.top {
	display: flex;
}
.red {
	color: red;
}
.green {
	color: green;
}
</style>
